<template>
  <el-dialog v-model="dialogFormVisible" :title="title" @close="closeDialog" style="min-width: 600px;">
    <el-form :model="paymentTypeForm" ref="addAppRef" :rules="paymentTyperules">
      <el-form-item label="缴费类型" :label-width="80" prop="paymentTypeId" style=" margin-top: 10px;">
        <el-select v-model="paymentTypeForm.paymentTypeId" placeholder="请选择缴费类型">
          <el-option v-for="item in payTypeList" :key="item.id" :label="item.paymentTypeName"
            :value="item.paymentTypeId" />
        </el-select>
      </el-form-item>
    </el-form>
    <el-upload ref="upload" class="upload-demo" :limit="1" :on-exceed="handleExceed" :auto-upload="false"
      :file-list="fileList" :on-change="fileChange" :before-remove="handleRemove"
      accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
      <template #trigger>
        <el-button type="primary">选择文件</el-button>
      </template>
      <el-button class="upload-btn" type="success" @click="submitUpload"
        v-loading.fullscreen.lock="fullscreenLoading">上传数据</el-button>
      <template #tip>
        <div class="el-upload__tip" style="color: red;">
          选择正确模版的Excel文件，并且只能选择一个文件!
        </div>
        <div class="el-upload__tip" style="color: #409eff;cursor:pointer;" v-if="templateUrl != ''">
          <el-link :href="templateUrl" type="success">点此下载模版文件</el-link>
        </div>
      </template>
    </el-upload>
  </el-dialog>
</template>

<script>
import { ref } from "vue";
import { httpService } from "@/utils/httpService";
import { ElMessage, ElForm, ElLoading } from "element-plus";
import { tr } from 'element-plus/es/locale';
import { vxRule } from "@/utils/validator";

export default {
  name: "AddExcelFile",
  components: { ElForm, ElMessage, ElLoading },
  data() {
    return {
      dialogFormVisible: ref(false),
      fullscreenLoading: false,
      formLabelWidth: "120px",
      title: "",
      uploadApiUrl: "",
      fileList: [],
      templateUrl: "",
      payTypeList: [],
      paymentId: "",
      paymentTypeForm: {
        paymentTypeId: "",
      },
      paymentTyperules: {
        paymentTypeId: vxRule(true, null, "blur"),
      },
    };
  },
  methods: {
    closeDialog() {
      this.clear();
    },
    cancel() {
      this.dialogFormVisible = false;
      this.clear();
    },
    clear() {
      this.dialogFormVisible = false;
      this.$refs.upload.clearFiles();
      this.fileList = [];
    },
    fileChange(file, fileList) {
      this.fileList = fileList;
    },
    handleRemove() {
      this.$refs.upload.clearFiles();
      this.fileList = [];
    },
    handleExceed(files) {
      this.$refs.upload.clearFiles();
      this.fileList = [];
      this.$refs.upload.handleStart(files[0])
    },
    getPaymentAmountList() {
      httpService(
        `/javaApi/payment/getPaymentAmount/${this.paymentId}`,
        {}, "get"
      ).then((data) => {
        this.payTypeList = data.object
        if (this.payTypeList) {
          this.paymentTypeForm.paymentTypeId = this.payTypeList[0].paymentTypeId
        }
      });
    },
    submitUpload() {
      this.$refs.addAppRef.validate((valid) => {
        if (valid) {
          let params = new FormData(); //创建一个form对象,必须是form对象否则后端接受不到数据
          // params.append("paymentTypeId", this.paymentTypeForm.paymentTypeId);
          // params.append("paymentId", this.paymentId);
          if (this.fileList.length > 0) {
            if (this.fileList[0].raw) {
              this.fullscreenLoading = true;
              this.dialogFormVisible = true;
              params.append("file", this.fileList[0].raw);
              let config = { "Content-Type": "multipart/form-data" };
              httpService(`/javaApi/payment/upload/${this.paymentTypeForm.paymentTypeId}/${this.paymentId}`, params, "post", config).then(
                (data) => {
                  this.fullscreenLoading = false
                  this.dialogFormVisible = false;
                  if (data.code == 200) {
                    ElMessage.success(data.object);
                    this.clear();
                    //刷新父组件的数据
                    this.$parent.getPaymentDetailList();
                  } else {
                    ElMessage.error(data.object);
                  }
                }
              );
            }
          } else {
            ElMessage.error("请选择文件");
          }
        } else {
          return false;
        }
      });


      // let params = new FormData(); //创建一个form对象,必须是form对象否则后端接受不到数据
      // if (this.fileList.length > 0) {
      //   if (this.fileList[0].raw) {
      //     this.dialogFormVisible = true;
      //     params.append("file", this.fileList[0].raw);
      //     let config = { "Content-Type": "multipart/form-data" };
      //     console.log(this.uploadApiUrl);
      //     httpService(this.uploadApiUrl, params, "post", config).then(
      //       (data) => {
      //         this.dialogFormVisible = false;
      //         if (data.code == 200) {
      //           ElMessage.success(data.object);
      //           this.clear();
      //           //刷新父组件的数据
      //           // this.$parent.reloadData();
      //         } else {
      //           ElMessage.error(data.object);
      //         }
      //       }
      //     );
      //   }
      // } else {
      //   ElMessage.error("请选择文件");
      // }
    },
  },
};
</script>
<style scoped>
.upload-demo {
  padding: 20px;
  border: 1px solid #dedede;
  margin-bottom: 60px;
}

.upload-btn {
  margin-left: 10px;
}

.el-upload__tip {
  padding-top: 10px;
  padding-bottom: 10px;
}

.el-dialog__header {
  padding: var(--el-dialog-padding-primary);
  padding-bottom: 10px;
  border-bottom: 1px solid #dedede !important;
  margin-bottom: 10px;
}
</style>